<%# Most of this design has been extracted from the tags _topicCard with slight variations %>
<% subscriptions ||= @tag_subscriptions  # allow overriding with local variable %>
<% shown_nids = [@blog.nid] %>
<% subscriptions.each do |subscription| %>
  <% tag_name = subscription.tagname %>
  <% latest_activity_nid = subscription.tag.latest_activity_nid %>
  <% notes = Tag.find_nodes_by_type(tag_name, type = 'note', limit = 3).where.not(nid: shown_nids)  %>
    <% if notes.present?  %> <%# Topics without notes will not be displayed. If pagination shows many empty pages, refer to https://github.com/publiclab/plots2/issues/8964#issuecomment-763303076 %>
      <div class="card-view pt-5">
          <div class="card shadow-sm p-2 mb-3 bg-white rounded" >
            <div class="card-header mt-2" style=" padding:0.8em; background-color: inherit; border:none;">
            <%# Unfollow section %>
              <% if current_user && current_user.following(tag_name) %>
                <a class="ellipsis pull-right" data-toggle="dropdown" style="cursor:pointer" aria-expanded="true"><i class="fa fa-ellipsis-h" style="color:#ccc;font-size:18px;margin-right:10px;"></i></a>
                <div class="dropdown-menu">
                  <div class="dropdown-item">
                    <a style="margin-top:-8px;" data-method="delete" data-confirm="Are you sure you'd like to unfollow this topic?" rel="tooltip" title="<%= translation('tag.show.unfollow',{},false) %>" href="/unsubscribe/tag/<%= tag_name %>">
                      <%= translation('tag.show.unfollow_text') %>
                    </a>
                  </div>
                </div>
              <% end %>
            <%# Topic name %>
              <h4 style="display: inline-block;"><a href="/tag/<%= tag_name %>"><%= tag_name %></a></h4>
            <%# Follower count  %>
              <p style="display: inline-block; color: #808080;"><a style="text-decoration: underline; color: #808080;" href="/tag/<%= tag_name %>"><%= Tag.follower_count(tag_name) %> <%= translation('tag.show.following') %></a></p>
            </div>
            <div class="card-body pr-0">

              <!-- First 3 notes in the Topic -->
              <div class="node-list">
               <div class="row no-gutters">
                <% notes.each do |node|  %>
                <% shown_nids << node.id %>
                  <div class="col-md-4 card-responsive mb-2 pr-1">
                    <div class="card">
                      <a <% if @widget %>target="_blank"<% end %> href="<%= node.path %>">
                       <% if node.main_image %>
                           <img class="card-img-top" style="margin-bottom: 10px;" aria-hidden="true" src="<%= node.main_image.path(:default) %>" />
                        <% elsif node.scraped_image %>
                           <img class="card-img-top" style="margin-bottom: 10px;" aria-hidden="true" src="<%= node.scraped_image %>" />
                        <% else %>
                         <div class="imgg" style="background:#ddd; margin-bottom: 10px;overflow:hidden;">
                            <img src="https://storage.googleapis.com/publiclab-production/public/system/images/photos/000/045/449/medium/paint-bucket.png" style="width: 100%;padding: 15% 30%;opacity: 0.3;">
                         </div>
                        <% end %>
                     </a>
                      <div class="card-body">
                          <h5 style="margin-bottom: 0px;" class="text-truncate"><a style="color: inherit; text-decoration: none;" <% if @widget %>target="_blank"<% end %> href="<%= node.path %>" style="color: black"><%= (node.type == 'note') ? node.title : node.latest.title %></a></h5>
                          <div style="font-size:1.0em;color:darkgray;">
                              <p>
                                 <%= translation('tag.show.by') %>
                                  <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>" style="color: #303030">@<%= node.author.name %></a>
                              </p>
                          </div>
                      </div>
                    </div>
                  </div>
                <% end %>
                </div>
              </div>

            </div>
            <div class="card-footer" style="background-color: inherit; border:none;">
              <% note_count = post_count(tag_name, 'note') %>
              <% wiki_count = post_count(tag_name, 'page') %>
              <a style="padding-top:15px;text-decoration:underline;color:#808080;display:inline-block;" href="/tag/<%= tag_name %>"><%= note_count %> <% if note_count > 1 || note_count == 0 %> <%=raw translation('tag.index.post').pluralize %> <% else %> <%= translation('tag.index.post') %> <% end %></a> |
              <a style="text-decoration:underline;color:#808080;display:inline-block;" href="/wiki/tag/<%= tag_name %>"><%= wiki_count %><% if wiki_count > 1 || wiki_count == 0 %> <%=raw translation('tag.index.wiki').pluralize %> <% else %> <%= translation('tag.index.wiki') %> <% end %></a>
              <% if latest_activity_nid&.start_with?('c') %>
                |
                &#8226; <a style="text-decoration:underline;color:#808080;display:inline-block;" href="/tag/comments/<%= tag_name %>"> <%= translation('dashboard_v2.dashboard.new_comment')%></a>
              <% end %>
              <div id="new-post" style="float:right;margin:10px 0 10px 10px;">
                <% if current_user %>
                  <a rel="tooltip" title="<%= translation('sidebar._post_button.share_your_work',{},false) %>" data-placement="bottom" href="/post?tags=<%= tag_name %>" class="btn btn-primary btn-md requireLogin"><%= translation('tag.show.new_post') %> <i class="fa fa-plus fa-white"></i></a>
                <% else %>
                  <a class="btn btn-primary btn-md index-follow-buttons follow-btn-remote requireLogin" href="/subscribe/tag/<%= tag_name %>" data-remote="true"><%= translation('tag.index.follow') %></a>
                <% end %>
              </div>
            </div>
          </div>
      </div>
  <% end %>
<% end %>


<%# If the items are listed on only one page, the pagination button will not be displayed %>
<% if @pagy.pages > 1 %>
  <%== pagy_bootstrap_nav @pagy %>
<% end %>

<style>

  .node-list {
    margin-right: 20px;
  }

  .circle {
    background-color: gray;
    display: block;
    margin-right: 8px;
    float: left;
    height: 20px;
    width: 20px;
    border-radius: 100%;
  }

  .card-view .card-body p {
    margin-bottom: 10px;
  }

  .card-view .card-body h5 {
      font-size: 1.2em;
  }
  .card-view .card-body {
      font-size: 0.85em;
  }

  .card-view a {
    display: revert;
  }

  .imgg,
  .card-img-top {
    height: 9rem;
    object-fit: cover;
  }

  .image-block {
    justify-content: center;
    display: flex;
  }

 /* Small devices */
  @media (min-width: 280px) and (max-device-width : 720px) {
    .card-responsive {
      margin-bottom: 21px;
    }
  }

   /* Tablets */
  @media (min-width: 768px) and (max-device-width : 1024px) {
    .card-responsive {
      margin-bottom: 21px;
      margin-right: 48px;
    }
  }

  /* Iphone 5 Responsiveness */
  @media (min-width: 320px) and (max-width: 568px) {
    .card-responsive {
      margin-bottom: 8px;
    }
  }
</style>
